<template>
  <div class="merchandise-management views-container">
    <div class="wlm-table">
      <div class="wlm-table-hearder-btn">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label>
            <el-form-item>
              <el-input
                @keyup.enter.native="filesSerch"
                v-model="tableFormatData.liveList.files.name"
                placeholder="请输入ID/直播标题"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="filesSerch">搜索</el-button>
              <el-button type="danger" @click="filesEmpty">清除筛选</el-button>
              <el-button type="primary" @click="synchronization" :loading="loading">同步直播间信息</el-button>
              <el-button type="primary" @click="addLiveStudio" :loading="loading">添加直播间</el-button>
            </el-form-item>
          </el-form-item>
        </el-form>
      </div>
      <div class="wlm-table-content">
        <el-table
          :ref="tableFormatData.liveList.key"
          :data="tableFormatData.liveList.tableData"
          @selection-change="handleSelectionChange"
          style="width:100%"
        >
          <el-table-column prop="avatarUrl" label="ID" width="180">
            <template slot-scope="scope">
              <span>{{scope.row.room_id}}</span>
            </template>
          </el-table-column>
          <el-table-column prop label="直播标题" width="180">
            <template slot-scope="scope">
              <span>{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="直播封面">
            <template slot-scope="scope">
              <div style="display:flex;justify-conten:center;align-items:center;">
                <img
                  height="50"
                  width="50"
                  :src="scope.row.cover_img"
                  alt="这是图片"
                  style="border-radius:50%;marign-right:10px;vertical:middle;"
                />
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="date" label="状态">
            <template slot-scope="scope">
              <el-tag type="warning" v-if="scope.row.live_status==107">{{'已过期'}}</el-tag>
              <el-tag type="warning" v-if="scope.row.live_status==106">{{'异常'}}</el-tag>
              <el-tag type="warning" v-if="scope.row.live_status==105">{{'暂停中'}}</el-tag>
              <el-tag type="danger" v-if="scope.row.live_status==104">{{'禁播'}}</el-tag>
              <el-tag type="info" v-if="scope.row.live_status==103">{{'已结束'}}</el-tag>
              <el-tag v-if="scope.row.live_status==102">{{'未开始'}}</el-tag>
              <el-tag type="success" v-if="scope.row.live_status==101">{{'直播中'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="直播时间" width="300">
            <template slot-scope="scope">
              <span>{{ scope.row.start_time*1000 | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>至
              <span>{{ scope.row.end_time*1000 | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="显示">
            <template slot-scope="scope">
              <el-switch
                :active-value="1"
                :inactive-value="2"
                @change="changeTableItem(
                {room_id:scope.row.room_id,live_state:scope.row.live_state},
                tableFormatData.liveList.change.live_state,
                {cancel:
                {msg:'已取消关闭',
                val:{scope:scope, cancelStatus:{key:'live_state',val:1}
                }
                }
                }
                )"
                v-model="scope.row.live_state"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="操作">
            <template slot-scope="scope" style="display:flex">
              <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              <el-button type="primary" size="mini" @click="check(scope.row.room_id)">查看</el-button>
              <el-button type="primary" size="mini" @click="qrImg(scope.row.room_id)">二维码</el-button>
              <el-dialog :visible.sync="dialogVisible" width="50%" style=" text-align: center;">
                <!-- <repassword></repassword> -->
                <div class="qrWrap">
                  <div class>
                    <p>直播间二维码</p>
                    <a :href="liveManQr" download>
                      <img :src="liveRoomQr" style="width:200px;height:200px" />
                    </a>
                  </div>
                  <div class>
                    <p>开播二维码</p>
                    <img :src="liveManQr" style="width:200px;height:200px" />
                  </div>
                </div>
                <span slot="footer" class="dialog-footer" style="text-align: center;">
                  <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
                </span>
              </el-dialog>
              <choose-goods
                @stopLoading="stopLoading"
                ref="chooseGoods"
                :config="chooseGoodsConfig"
                :changeEvt="filtersChange"
                :live_goods_ids="live_goods_ids"
              ></choose-goods>
              <el-button
                v-if="scope.row.live_status==102"
                :loading="load"
                size="mini"
                type="primary"
                @click="goodsToogle(scope.row.roomid,scope.row.room_id)"
              >添加直播商品</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-content flex-row flex-justify-e flex-align-c">
          <el-pagination
            :disabled="!hasTableData"
            @size-change="listPageChange"
            @current-change="listPageChange"
            :current-page.sync="tableFormatData.liveList.pagination.page"
            :page-sizes="tableFormatData.liveList.pagination.pagesizes"
            :page-size.sync="tableFormatData.liveList.pagination.list_rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="hasTableData?tableFormatData.liveList.pagination.total : 0"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getLiveList, asyLiveLists, setLive, delLive } from "@/api/setting";
import {
  liveImportGoods,
  getLiveRoomGoods,
  getLiveStartCode,
} from "@/api/upload";
import ChooseGoods from "@/components/ChooseGoods/liveGoods";
import mixins from "@/mixins/mixins";
export default {
  mixins: [mixins.getters("Table")],
  name: "Livelist",
  components: {
    ChooseGoods,
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      load: false,
      pindex: 1,
      timer: "",
      room_id: 0,
      live_goods_ids: [],
      liveRoomQr: "",
      liveManQr: "",
      tableFormatData: {
        current: "liveList",
        liveList: {
          key: "liveList",
          api: {
            getList: getLiveList,
          },
          tableData: [],
          goods: [],
          files: {
            name: "",
            ids: [],
            checkall: "0",
            live_state: "all",
          },
          change: {
            live_state: {
              name: "操作",
              key: "live_state",
              api: setLive,
            },
          },
          filters: {
            choose: {
              bindInit: ["chooseGoodsConfig"],
            },
          },

          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0,
          },
        },
      },
      chooseGoodsConfig: {
        type: ["chooseGoods"],
        model: "normal",
        initList: [],
        livegoods: "livegoods",
      },
    };
  },
  methods: {
    stopLoading() {
      this.load = false;
    },
    qrImg(room_id) {
      getLiveStartCode({ room_id }).then((res) => {
        console.log(res.data.data);
        this.liveRoomQr = res.data.data.room_code;
        this.liveManQr = res.data.data.zhubo_code;
        this.dialogVisible = true;
        // const liveRoomRq=require(res.data.data.code)
        // this.$alert(`<img src="${res.data.data.code}" >`, '直播二维码', {
        //   dangerouslyUseHTMLString: true
        // })
      });
    },
    addLiveStudio() {
      // 添加直播间
      this.$router.push("/livetelecast/addlivestudio");
    },
    check(id) {
      this.$router.push({
        path: "/livetelecast/addlivestudio",
        query: { id, type: 1 },
      });
    },
    goodsToogle(room, id) {
      this.load = true;
      const _this = this;
      _this.live_goods_ids = [];
      this.room_id = room;
      console.log("amg");
      const result = [];
      this.tableFormatData.liveList.goods.map((item) => {
        result.push(item.goods_id);
      });

      this.$refs.chooseGoods.currentRow = result;
      this.$refs.chooseGoods.toggle();
      console.log(result);

      getLiveRoomGoods({ room_id: id }).then((res) => {
        console.log(res);
        if (res.data.data != null) {
          _this.live_goods_ids = res.data.data;
        } else {
          _this.live_goods_ids = [];
        }
      });
    },
    filtersChange(val) {
      console.log("-------------------------");
      console.log(val);
      const liveData = [];
      val.displayData.map((item) => {
        liveData.push(item.goods_id);
      });
      const postData = { room_id: this.room_id, goods_id: liveData };
      liveImportGoods(postData).then((res) => {
        this.load = false;
        console.log(res);
        if (res.data.code == 1) {
          this.$message.success("添加直播商品成功！");
        }
      });
    },
    handleDelete(index, row) {
      // 删除
      console.log(index, row);
      this.$confirm("此操作将删除该直播间, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
          delLive({ room_id: row.room_id }).then((res) => {
            const { code } = res.data;
            code == 1 && this.$message.success("操作成功");
            this.filesEmpty();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    synchronization() {
      this.loading = true;
      this.asyLiveLists1();
    },
    asyLiveLists1() {
      asyLiveLists({ pindex: this.pindex })
        .then((res) => {
          // this.loading = false;
          // this.pindex=res.data.data.pindex
          //  this.tableFormatData.liveList.pagination.page = res.data.data.pindex
          // if (parseInt(res.data.data.stop) == 1) {
          //   clearInterval(this.timer)
          //   const { data: { msg, code } } = res
          //   if (code === 1) {
          //     this.$message.success(msg)
          //     this.loading = false
          //     this.$router.go(0)
          //   } else {
          //     this.$message.error(msg)
          //   }
          //   return false
          // }
          if(res.data.data.done==0){
 this.pindex = parseInt(this.pindex) + 1;
            this.asyLiveLists1();
          }else{
 this.loading = false;
            this.filesEmpty();
            this.pindex=1;
             this.$message.success("数据同步成功！")
            console.log(this.pindex,"-----------------------------------")
          }

        })

    },
  },
};
</script>
<style lang="scss" scoped>
.qrWrap {
  display: flex;
  justify-content: space-around;
}
</style>
